<template>
    <!--<div class="page">
        <v-pageTitle title="前言"></v-pageTitle>
        <div class="page-content">
            <v-pageNotes>
                <p>本项目以VueJS作为核心，ElementUI为UI框架，制作的大型单页面管理系统。本项目实现完全前后端分离，前端高度组件化、模块化，良好的解决了前端开发过程中面对的各种难题。</p>
                <p>本框架拥有完整的登录/注销过程、权限加载及校验、自动重新登录、XSS防注入（待做）、XSRF解决方案、页面加载进度条等前后端分离必备功能。</p>
                <p>在使用本框架前，请详细了解VueJS全家桶（vuejs + vuex + vue-router）及webpack使用方法，ES6语法规范。</p>
            </v-pageNotes>
            <v-pageSection title="什么是VueJS，为什么选用VueJS？">
                <div class="article">
                    <p>VueJS是当前流行的MVVM框架之一，其着重解决VM层，拥有轻量级、易上手、文档全、性能高的优点。 ueJS社区正蓬勃发展，是2016年发展最火速的前端框架。 因其轻量的关系，可以让它完全融入到之前的任何项目中，但个人仍然推荐使用它的单文件组件进行开发。 VueJS提供了一套完整的前端组件化、模块化编程方案，让前端组件化变的无比轻松。 结合Webpack的代码分割/合并、压缩、打包、热重载等功能更能实现一定程度的前端开发工程化。</p>
                    <p>与VueJS使用场景相同的框架还有ReactJS和AngularJS。其中ReactJS是生态最丰富的最完善的前端框架，其开创性的JSX语言为以后的前端框架造成了相当大的影响。 并且ReactJS拥有成熟的移动端开发框架——React Native，可以在学习一次后写各个平台的移动端应用。VueJS 2.0版很大程度上借鉴了ReactJS。</p>
                    <p>AngularJS是由Google公司推出的大型前端框架，其开创性的“数据绑定、事件绑定”对其后的框架产生了十分深远的影响。当前AngularJS 2.0已由微软公司进行继续开发及维护。</p>
                    <p>介绍完当前最火热的三个框架后，我们将其进行对比。</p>
                    <p><strong>学习难度</strong>：Angular > React > Vue</p>
                    <p>Angular学习曲线即为陡峭已经成为不争的事实。React的纯JS编程写模板则过于复杂，而且
                        <strong>没有中文文档</strong>。Vue使用一种更为简练更为直白的模板语法并且拥有
                        <strong>十分完善的中文文档</strong>
                    </p>
                    <p><strong>框架性能</strong>：Angular < React < Vue</p>
                    <p>Angular因其提供过于详细的解决方法，导致其框架本身十分巨大而且十分的不灵活。Vue和React在框架灵活性上相差不大，但Vue的性能比React的要稍好一点。</p>
                    <p><strong>未来发展</strong>：Angular < React = Vue</p>
                    <p>不得不说我是十分讨厌那种非常重的框架的，我说的就是Angular。在我看来轻量简洁的框架是更适合前端开发的。因前端开发本身就在不断发展，而且前端页面变更频繁，重型框架很有可能根本不能适应业务的频繁变化和发展。
                        这也是为什么Jquery曾经那么流行的原因。所以在我看来Angular本身很好，而且它确实为现有的框架提供了很多思路，未来也可能继续提供新的思路及解决方案，但我依然不看好它的发展，至少它不会火过React。
                        React当前已经十分成熟了，使用React的项目也十分巨大，完整的生态圈，良好的跨平台（React Native），可以说是很强！
                        Vue则本身就处于上升期间，近期Weex（Vue版的React Native）已经进入Apache基金会项目孵化器，项目的维护正式走上正轨。
                    </p>
                </div>
            </v-pageSection>
        </div>
        </div>-->
    <div class="page">
        <div id="app">
            <v-pageTitle title="首页"></v-pageTitle>
            <h1>{{title}}</h1>
            <ul class="todos">
                <li>
                    <input v-model="newTodo"
                        @keyup.13="addItem"
                        placeholder="快写下您要我记住的事吧"
                        autofocus="true"/>
                </li>
                <li v-for="(todo,index) in todos"
                    :class="{'checked':todo.done}">
                    <input type="checkbox"
                        @change="saveToStore"
                        v-model="todo.done"
                    /><label>{{ index+1 }}.{{ todo.value }}</label>
                    <time>{{ todo.created | date }}</time>
                    <button @click.prevent="delItem(todo)"></button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import './todos.less'
    import moment from 'moment'
    import 'moment/locale/zh-cn'
    moment.locale('zh-cn')

    export default {
        name: 'app',
        data () {
            return {
                newTodo:'',
                title: '添加待办事项',
                todos: []
            }
        },
        created (){
            if (this.is_initialized) {
                this.todos = JSON.parse(localStorage.getItem('VUE-TODOS'))
            }
        },
        computed: {
            is_initialized (){
                return localStorage.getItem('VUE-TODOS') != null
            }
        },
        filters: {
            date(val){
                return moment(val).calendar()
            }
        },
        methods: {
            addItem() {
                this.todos.push({
                    value: this.newTodo,
                    created: Date.now(),
                    done: false
                });
                this.saveToStore();
                this.newTodo = ''
            },
            delItem (todo) {
                console.log(todo)
                this.todos = this.todos.filter((x) => x !== todo)
                this.saveToStore()
            },
            saveToStore(){
                localStorage.setItem('VUE-TODOS', JSON.stringify(this.todos))
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page{
        background-color: #F5F5F5 !important;
    }

    body {
        font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
        line-height: 1.4em;
        background: #D2D4D7;
        color: #4d4d4d;
        margin: 0 auto;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        font-smoothing: antialiased;
        font-weight: 100;
    }

    h1 {
        width: 100%;
        font-size: 30px;
        font-weight: 100;
        height: 50px;
        text-align: center;
        // color: rgba(175, 47, 47, 0.15);
        -webkit-text-rendering: optimizeLegibility;
        -moz-text-rendering: optimizeLegibility;
        text-rendering: optimizeLegibility;
    }

    button,
    input {
        outline: none;
    }

    .hidden {
        display: none;
    }

    @media (min-width: 768px) {
        body {
            max-width: auto;
        }
    }
</style>
